<template>
  <div class="app-main-content-box">
    <!-- 标题 start -->
    <app-main-title title="数据概览" />
    <!-- 标题 end -->

    <!-- 交易概况 start -->
    <div class="common-container">
      <div class="title app-text-color-primary">交易概况</div>
      <!-- 筛选 -->
      <div>
        <el-form ref="payForm" :model="payForm" :inline="true" size="small">
          <el-form-item label-width="0">
            <el-button-group class="quick-btn-group">
              <el-button
                v-for="(v,i) in quickDateOptions"
                :key="v.val"
                :type="payForm.dateIndex===i?'primary':''"
                @click="quickDateSearch('payForm',v.val,i)"
              >{{ v.label }}</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item label="业务类型：" prop="bizCode">
            <!-- <el-radio-group v-model="payForm.bizCode">
              <el-radio>全部</el-radio>
              <template v-for="(item, index) in manageBizCodeOptions">
                <el-radio v-if="item.usePay" :key="index" :label="item.key">{{ item.label }}</el-radio>
              </template>
            </el-radio-group>-->
            <el-select v-model="payForm.bizCode" clearable placeholder="请选择">
              <el-option label="全部" value="all" />
              <template v-for="item in manageBizCodeOptions">
                <el-option v-if="item.usePay" :key="item.key" :label="item.label" :value="item.key" />
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据 -->
      <el-card class="card-box" shadow="always">
        <Card :total-list="payCardData" />
      </el-card>
    </div>
    <!-- 交易概况  end -->

    <!-- 会员概况 start -->
    <div class="common-container">
      <div class="title app-text-color-primary">会员概况</div>
      <!-- 筛选 -->
      <div>
        <el-form ref="memberForm" :model="memberForm" label-width="0" size="small">
          <el-form-item>
            <el-button-group class="quick-btn-group">
              <el-button
                v-for="(v,i) in quickDateOptions"
                :key="v.val"
                :type="memberForm.dateIndex===i?'primary':''"
                @click="quickDateSearch('memberForm',v.val,i)"
              >{{ v.label }}</el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据 -->
      <el-card class="card-box" shadow="always">
        <Card :total-list="memberCardData" />
      </el-card>
      <!-- 统计 -->
      <!-- 图例 -->
      <el-card class="member-echarts-box" shadow="always">
        <el-row :gutter="10" type="flex">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <div class="sub-title">会员等级分布</div>
            <div class="member-echarts-concent">
              <div class="table">
                <el-table :data="memberCardPreData" border style="width: 100%" show-summary>
                  <el-table-column prop="name" label="会员等级" />
                  <el-table-column prop="value" label="会员数" />
                  <el-table-column prop="percentage" label="占比" width="80px" />
                </el-table>
              </div>
              <div class="pre">
                <Pre id="memberCard" />
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <div class="sub-title">会员来源分布</div>
            <div class="member-echarts-concent">
              <div class="table">
                <el-table :data="memberCardPreData" border style="width: 100%" show-summary>
                  <el-table-column prop="name" label="会员等级" />
                  <el-table-column prop="value" label="会员数" />
                  <el-table-column prop="percentage" label="占比" width="80px" />
                </el-table>
              </div>
              <div class="pre">
                <Pre id="memberSource" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 会员概况  end -->

    <!-- 储值概况 start -->
    <div class="common-container">
      <div class="title app-text-color-primary">储值概况</div>
      <!-- 筛选 -->
      <div>
        <el-form ref="balanceForm" :model="balanceForm" label-width="0" size="small">
          <el-form-item>
            <el-button-group class="quick-btn-group">
              <el-button
                v-for="(v,i) in quickDateOptions"
                :key="v.val"
                :type="balanceForm.dateIndex===i?'primary':''"
                @click="quickDateSearch('balanceForm',v.val,i)"
              >{{ v.label }}</el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据 -->
      <el-card class="card-box" shadow="always">
        <Card :total-list="balanceCardData" />
      </el-card>
    </div>

    <!-- 储值概况  end -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Pre from '@/components/Charts/Pre'
import Card from './components/Card'
import { getFilterFormPastTime } from '@/utils/format'
export default {
  components: {
    Pre,
    Card
  },
  data() {
    return {
      // 配置
      quickDateOptions: [
        {
          val: 1,
          label: '今天'
        },
        {
          val: 'yesterday',
          label: '昨天'
        },
        {
          val: 7,
          label: '近7天'
        },
        {
          val: 15,
          label: '近15天'
        },
        {
          val: 30,
          label: '近30天'
        },
        {
          val: 'nowMonth',
          label: '本月'
        }
      ],
      quickDateIndex: {
        payDate: 1
      },
      // 状态

      // 数据
      payCardData: [
        {
          title: '订单原价合计',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: '',
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '业务优惠',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: '',
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '交易金额合计',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: '',
          moreInfo: ['我是额外的值', '我是额外的值']
        }
      ],
      memberCardData: [
        {
          title: '新增会员',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '开卡收益',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '会员消费金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        }
      ],
      balanceCardData: [
        {
          title: '充值金额',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '实充金额消费',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '实充金额消费',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '实充金额消费',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '实充金额消费',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        },
        {
          title: '实充金额消费',
          value: '999,999,999.99',
          describe: '我是描述',
          radio: {
            key: '环比',
            value: 1
          },
          moreInfo: ['我是额外的值', '我是额外的值']
        }
      ],
      payForm: {
        date: null,
        dateIndex: 1,
        bizCode: 'all'
      },
      memberForm: {
        date: null,
        dateIndex: 1
      },
      balanceForm: {
        date: null,
        dateIndex: 1
      },
      memberCardPreData: [
        {
          name: '金卡',
          value: 999999999,
          percentage: 1
        },
        {
          name: '银卡',
          value: 1,
          percentage: 1
        },
        {
          name: '铜卡',
          value: 2,
          percentage: 1
        }
      ],
      memberSourcePreData: []
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['manageBizCodeOptions'])
  },
  created() {},
  mounted() {},
  methods: {
    /**
       * 数据组
       */
    // 获取数据
    fetchData() {},

    /**
       * 按钮组
       */
    // 便捷日期查询
    async quickDateSearch(type, days, index) {
      const dateArr = await getFilterFormPastTime(days)
      this[type].date = dateArr
      this[type].dateIndex = index
      this.fetchData()
    }

    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 通用容器 */
  .common-container {
    &:not(:last-child) {
      margin-bottom: 40px;
    }
    .title {
      margin: 10px 0;
      font-size: 18px;
      font-weight: bold;
    }
    .sub-title {
      margin: 10px 0;
      font-weight: bold;
    }
    ::v-deep .el-row {
      flex-wrap: wrap;
    }
  }

  /* 数据统计卡片 */
  .card-box {
    ::v-deep .el-card__body {
      padding: 20px 0;
    }
  }

  /* 会员统计 */
  .member-echarts-box {
    margin-top: 10px;
    .member-echarts-concent {
      display: flex;
      align-items: center;
      .table {
        width: 50%;
      }
      .pre {
        width: 50%;
        height: 250px;
      }
    }
  }
</style>
